<template>
  <view style="position: relative;">
    <basePage
      :show-tabbar="false"
      :page-params="pageParams"
      @testAgainFn="initPageFn"
    >
      <ProductItem
        v-if="!show"
        :checkbox-show="true"
        :pro-label-show="false"
        :specs-show="false"
        :item-height="526"
        :edit-status.sync="editStatus"
        :check-all="checkAll"
        :spu-list="spuList"
        @getListFn="getMemberCollectFn"
      />
      <view v-show="isLoadMore">
        <uni-load-more
          :status="loadStatus"
          :content-text="contentText"
          :icon-size="14"
        />
      </view>
      <view v-if="false" class="operate-station" />
      <view v-if="false" class="operate-box">
        <view
          v-if="editStatus"
          class="checkbox-box"
        >
          <u-checkbox-group v-model="checkAll">
            <u-checkbox
              :custom-style="{position: 'absolute', left: '16rpx', top: '16rpx'}"
              label-size="14"
              label-color="#808080"
              size="16"
              active-color="#FF5533"
              label="全选"
              :name="1"
            />
          </u-checkbox-group>
        </view>
        <view class="right-oprate">
          <view class="btn-box edit-btn">
            <view
              v-if="!editStatus"
              class="operate-btn"
              @click="editStatus = true"
            >
              编辑
            </view>
          </view>
          <view
            v-if="editStatus"
            class="btn-box finish-btn"
          >
            <view
              class="operate-btn"
              @click="cancelCollectionFn"
            >
              取消收藏
            </view>
            <view
              class="operate-btn"
              @click="editStatus = false"
            >
              完成
            </view>
          </view>
        </view>
      </view>
    </basePage>
  </view>
</template>

<script>
import basePage from '@/components/base-page'
import ProductItem from '@/myAccount/frequentlyPurchasedGoods/list-product-item'
import { getPlatformTypeFn, setPageParamsFn } from '@/common/common'
import {
  regularpurchaseSelect
} from '@/api/yc_goods'
export default {
  components: {
    basePage,
    ProductItem,
  },
  data() {
    return {
      show: false,
      editStatus: false, //编辑状态 true-编辑状态，false-非编辑状态
      checkAll: '',
      popHeight: 0,
      pageParams: {
        // state: 'ERROR',
        emptyTitle: '信号可能跑到外星球了哦～',
        errorTitle: '请求失败',
        showButton: true
      },
      spuList: [],
      page: 1,
      pageSize: 20,
      loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
      isLoadMore: false, //是否加载中
      contentText: {
        contentdown: '加载更多',
        contentrefresh: '加载中',
        contentnomore: '没有更多了'
      },
    }
  },
  //上拉触底函数
  onReachBottom() {
    if (!this.isLoadMore) {
      this.isLoadMore = true
      this.page += 1
      this.getMemberCollectFn(this.page)
    }
  },
  /*下拉刷新*/
  onPullDownRefresh() {
    //刷新后的效果
    this.initPageFn()
  },
  onLoad(option) {
    this.initPageFn()
    this.getTopHeight()
  },
  methods: {
    /*批量取消收藏 - 一期暂时不做*/
    cancelCollectionFn() {
      console.log(this.checkAll)
    },
    /*初始化函数*/
    initPageFn() {
      this.getMemberCollectFn(1)
    },
    /*查询商品列表*/
    getMemberCollectFn(pageNum, isInit) {
      if (pageNum) {
        this.page = pageNum
      }
      const {
        cityCode,
        warehouseCode
      } = this.vuex_cityInfo
      const platformType = getPlatformTypeFn(this.vuex_accountInfo.accountType)
      const params = {
        platformType,
        'wareHouseId': warehouseCode,
        'cityId': cityCode,	//城市编码，默认北京市（110100）
        'appletType': 'applet', //平台类型 applet-小程序
        'page_num': this.page,	//分页：当前页码，默认第一页
        'page_size': this.pageSize,	//分页：每页显示数据量，默认20条
      }
      regularpurchaseSelect(params).then((res) => {
        if (res.errorCode == 4) {
          setPageParamsFn(this, 'EMPTY', '矮油，这里空空如也~', false)
          return
        }
        if (res.errorCode != 0) {
          this.$u.toast(res.msg)
          return
        }
        this.$nextTick(() => {
          if (res.totalRecord == 0 || !res.data) {
            setPageParamsFn(this, 'EMPTY', '矮油，这里空空如也~', false)
            return
          }
          uni.stopPullDownRefresh() //刷新数据之后停止刷新效果
          if (res.data.result) {
            setPageParamsFn(this, null)
            this.spuList = this.page == 1 ? res.data.result : this.spuList.concat(res.data.result)
            if (res.data.result.length < this.pageSize) {
              this.isLoadMore = true
              this.loadStatus = 'nomore'
            } else {
              this.isLoadMore = false
              this.loadStatus = 'more'
            }
          } else {
            this.isLoadMore = true
            this.loadStatus = 'nomore'
          }
          this.$forceUpdate()
        })
      }).catch((err) => {
        setPageParamsFn(this, 'ERROR', err.message ? err.message : '服务异常')
        this.isLoadMore = false
      })
    },
    cancelFn() {
      this.popShowContent = 'filterForm'
    },
    close() {
      this.show = false
      if (this.spuList.length == 0) {
        setPageParamsFn(this, 'EMPTY', '矮油，这里空空如也~', false)
      }
      this.popShowContent = 'filterForm'
    },
    getTopHeight() {
      // #ifdef MP-WEIXIN
      /*获取顶部状态栏高度*/
      const statusBarHeight = this.vuex_systemInfo[1].statusBarHeight
      /*获取导航栏高度*/
      const customNavHeight = (uni.getMenuButtonBoundingClientRect().top - statusBarHeight) + (uni.getMenuButtonBoundingClientRect().bottom - statusBarHeight);
      this.popHeight = this.vuex_systemInfo[1].safeArea.height - (Number(statusBarHeight) + Number(customNavHeight.toFixed(0)))
      // #endif
      // #ifdef MP-ALIPAY
      this.popHeight = this.vuex_systemInfo[1].windowHeight - this.vuex_systemInfo[1].titleBarHeight - this.vuex_systemInfo[1].statusBarHeight
      // #endif
    },
  }
}
</script>

<style lang="scss" scoped>
.operate-station{
  width: 100%;
  height: 132rpx;
}
.operate-box{
  width: 100%;
  height: 64rpx;
  position: fixed;
  bottom: 0;
  padding-bottom: 68rpx;
  background: $uni-bg-color;
  .checkbox-box{
    float: left;
  }
  .right-oprate{
    float: right;
    height: 64rpx;
    line-height: 64rpx;
    font-size: $uni-font-size-base;
    color: $uni-orange;
    .btn-box{
      float: left;
      .operate-btn{
        float: left;
        margin-right: 48rpx;
      }
    }
  }
}
</style>
